<template>
	<view class="apps">
		<uv-navbar title="" titleStyle="font-weight:400;" bg-color="rgba(255,255,255,.01)" placeholder autoBack="true">
			<template v-slot:left>
				<view class="flex aic">
					<uv-icon name="https://lifeanclor.byyds.cn/static/images/backlogo.png" size="30"></uv-icon>
					<view class="f16 ml20 fw4 c333">莱安AI家居</view>
				</view>
			</template>
		</uv-navbar>
		<image class="bg" src="https://lifeanclor.byyds.cn/static/images/lan.jpg" mode="widthFix"></image>
		<view class="pr zidx5 flex aic plr20 mt20">
			<view class="f1">
				<uv-cell-group :border="false">
						<uv-cell>
							<!-- 自定义左侧标题 -->
							<template v-slot:title>
								<view class="flex aic">
								<text class="c333 f15 mr10">请您登录</text><uv-icon size="14px" name="arrow-down-fill" color="#333"></uv-icon>
								</view>
							</template>
						</uv-cell>
					</uv-cell-group>
			</view>
			<view class="f1 flex aic jcsa">
				<view class="bgwhite wh40 mr20 flex aic jcc bdr15 boxsd">
					<uv-icon name="bell" size="30"></uv-icon>
				</view>
				<view class="bgwhite wh40  flex aic jcc bdr15 boxsd">
					<uv-icon name="plus" size="30"></uv-icon>
				</view>
			</view>
		</view>
		<uv-gap height="30"></uv-gap>
		<view class="pr zidx6 mlr30 bdbox h50p bgf5 flex fdc aic jcc bdr20">
			<view class="flex fdc aic">
				<image src="https://lifeanclor.byyds.cn/static/images/machine.png"  style="width:320rpx;height:320rpx" mode="widthFix"></image>
				<view class="f16 c333 mt30">绑定本家庭第一台智能设备</view>
				<view class="f13 c666 mt20 mb30">为您提供智能AI新体验</view>
				<view class="w300">
					<view class="mt40 bgf1 boxsd bdr100 plr05 tb05">
						<uv-button shape="circle" text="添加智能设备" customStyle="height:44px;font-weight:400" customTextStyle="color:#fff;font-weight:400" color="linear-gradient(180deg, #2688df, #65b3f3)"></uv-button>
					</view>
				</view>
			</view>
		</view>
		<uv-tabbar :value="tabActive" inactiveColor="#555" activeColor="#02A3F3" customStyle="background-image:linear-gradient(to bottom, #EEF0F5 0%, #F8F9FB 100%);border-top-width: 1px !important;
			border-color: #fefefe !important;border-top-left-radius: 12px; border-top-right-radius:12px ; padding-top:5px;">
				<uv-tabbar-item text="首页">
					<template v-slot:active-icon>
						<image class="wh30" src="https://lifeanclor.byyds.cn/static/images/bar1a.png"></image>
					</template>
					<template v-slot:inactive-icon>
						<image class="wh30" src="https://lifeanclor.byyds.cn/static/images/bar1.png"></image>
					</template>
				</uv-tabbar-item>
				<uv-tabbar-item text="服务">
					<template v-slot:active-icon>
						<image class="wh30" src="https://lifeanclor.byyds.cn/static/images/bar2a.png"></image>
					</template>
					<template v-slot:inactive-icon>
						<image class="wh30" src="https://lifeanclor.byyds.cn/static/images/bar2.png"></image>
					</template>
				</uv-tabbar-item>
				<uv-tabbar-item text="我的">
					<template v-slot:active-icon>
						<image class="wh30" src="https://lifeanclor.byyds.cn/static/images/bar3a.png"></image>
					</template>
					<template v-slot:inactive-icon>
						<image class="wh30" src="https://lifeanclor.byyds.cn/static/images/bar3.png"></image>
					</template>
				</uv-tabbar-item>
		</uv-tabbar>
	</view>
</template>

<script setup>
	import { ref , reactive, nextTick, computed } from 'vue'
	import { onLoad, onShow, onHide } from '@dcloudio/uni-app'
	const tabActive=ref(0),
		  value=ref(""),
		  suffixIcon=ref("eye-off-outline"),
		  form=ref({name:"",password:""})
	
	const choose = ()=>{
		
	},tabIcon=()=>{
		if(suffixIcon.value =='eye'){
			suffixIcon.value='eye-off-outline'
			pwd.value = true
		}else{
			suffixIcon.value='eye'
			pwd.value=false
		}
	}
	
	onLoad(()=>{
		
	})
</script>